<template>
    <div class="page_search">

        <form action="/">
            <van-search v-model="keys" show-action placeholder="输入影院名称" shape="round" clearable autofocus
                @update:model-value="onSearch(keys)" @cancel="canle" />
        </form>

        <div class="cinema-nearby" v-if="showrecommend">
            <span>离你最近</span>
            <ul>
                <li v-for="item in recommend" @click="handerClick(item.cinemaId)">{{ item.name }}</li>
            </ul>
        </div>
        <cinlist :tCinema="tCinema" v-if="showcinlist"></cinlist>
    </div>
</template>

<script setup>
import { getRecommend, getCinema } from "@/api/mm"
import { onMounted, ref } from "vue"
import cinlist from "@/component/cinlist.vue"
import { userStore } from "@/stores/user"
import { useRouter } from "vue-router"

const recommend = ref(null);
const cinemalist = ref(null);
const tCinema = ref(null);
const router = useRouter()
const store = userStore()
const keys = ref("")
const showcinlist = ref(false)
const showrecommend = ref(true)

const canle = () => {
    history.back()
}

const onSearch = (value) => {
    if (value) {
        showcinlist.value = true
        showrecommend.value = false
        tCinema.value = cinemalist.value.filter((item) => {
            return item.address.includes(value) || item.name.includes(value)
        })
    } else {
        tCinema.value = []
        showrecommend.value = true
    }
}

onMounted(async () => {
    recommend.value = (await getRecommend({ cityId: store.cityId })).data.cinemas
    cinemalist.value = (await getCinema({ cityId: store.cityId })).data.cinemas
})

const handerClick = (cityId) => {
    router.push(`/cinema/${cityId}/film`)
}

</script>

<style scoped>
ul {
    margin-top: 0px;
}

.cinema-nearby ul {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}

li {
    flex-shrink: 0;
    padding: 8px 12px;
    background-color: hsla(0, 0%, 95.7%, .6);
    margin: 5px;
    font-size: 13px;
}

span {
    display: block;
    padding: 0 20px;
    font-size: 13px;
    line-height: 13px;
    color: #bdc0c5;
    margin-top: 18px;
}

.van-search {
    border-bottom: 1px solid #ededed;
}
</style>